<template>
  <view
    class="c-icon-box"
    :class="[ggclass]"
    :style="{ color: colors }"
    @click="$emit('click', $event)"
  >
    <text
      class="c-icon iconfont"
      :class="[icon]"
      :style="{ fontSize: fontSizes }"
    >
    </text>
    <text class="badge" v-if="badge">
      {{ badge }}
    </text>
    <view class="slotView" v-if="$slots.default">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import propsMixin from "../mixins/props/index.js";
import { defineProps, computed } from "vue";
const props = defineProps({
  ggclass: {
    type: String,
    default: "",
  },
  icon: {
    type: String,
    default: "",
  },
  size: {
    type: [String, Number],
    default: "28rpx",
  },
  color: {
    type: String,
    default: "",
  },
  badge: {
    type: Number,
    default: 0,
  },
});

const fontSizes = computed(() => {
  let num = parseInt(props.size as any);
  return `${num}rpx`;
});
const colors = computed(() => {
  //@ts-ignore
  return props.color
});
</script>

<style lang="scss" scoped>
.c-icon-box {
  display: inline-flex;
  align-items: center;
  position: relative;

  .badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 34rpx;
    height: 34rpx;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    background: #d00930 linear-gradient(180deg, #f05923 0%, #f02a23 100%);
    color: #fff;
    border-radius: 50%;
  }

  .c-icon {
    // margin-right: 10rpx;
  }

  .slotView {
    margin-left: 10rpx;
  }
}
</style>